<template>
  <div id="index" ref="appRef">
    <div class="newbg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <topHeader currentMenu="jrsbqk" />

        <div class="grid-box grid-3-4-3">
          <div class="left-top">
            <dv-border-box-12>
              <sbrsqk />
            </dv-border-box-12>
          </div>
          <div class="right-top">
            <dv-border-box-12>
              <sbrsqst />
            </dv-border-box-12>
          </div>
          <div class="left-mid">
            <dv-border-box-12>
              <sbjeqk />
            </dv-border-box-12>
          </div>
          <div class="right-mid">
            <dv-border-box-12>
              <fsbfstjsbrsqkt />
            </dv-border-box-12>
          </div>
          <div class="left-end">
            <div class="b-left">
              <dv-border-box-12>
                <rkqk />
              </dv-border-box-12>
            </div>
            <div class="b-right">
              <dv-border-box-12>
                <tkqk />
              </dv-border-box-12>
            </div>
          </div>
          <div class="right-end">
            <dv-border-box-12>
              <fsbqdtjsbrsqkt />
            </dv-border-box-12>
          </div>
          <div class="center map">
            <button class="backBtn" @click="initPage">
              <span class="iconfont leftArrow">&#xe603;</span>
              <span class="text">返回全国</span>
            </button>
            <mapChart />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import topHeader from "@/components/topHeader";
import sbjeqk from "./jrsbqk/sbjeqk.vue";
import sbrsqk from "./jrsbqk/sbrsqk.vue";
import rkqk from "./jrsbqk/rkqk.vue";
import tkqk from "./jrsbqk/tkqk.vue";
import sbrsqst from "./jrsbqk/sbrsqst.vue";
import fsbfstjsbrsqkt from "./jrsbqk/fsbfstjsbrsqkt.vue";
import fsbqdtjsbrsqkt from "./jrsbqk/fsbqdtjsbrsqkt.vue";
import mapChart from "./jrsbqk/mapChart.vue";

import ChinaJson from "@/common/echart/China.json";

export default {
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    topHeader,
    sbjeqk,
    sbrsqk,
    rkqk,
    tkqk,
    sbrsqst,
    fsbfstjsbrsqkt,
    fsbqdtjsbrsqkt,
    mapChart,
  },
  mounted() {
    // this.timeFn()
    // this.initPage();
    this.$echarts.registerMap("china", ChinaJson);
    this.cancelLoading();
  },
  beforeDestroy() {
    // clearInterval(this.timing)
  },
  methods: {
    // timeFn() {
    //   this.timing = setInterval(() => {
    //     this.dateDay = formatTime(new Date(), 'HH: mm: ss')
    //     this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
    //     this.dateWeek = this.weekday[new Date().getDay()]
    //   }, 1000)
    // },
    initPage() {
      console.log(ChinaJson, "initPages");
      this.initMap();
    },
    initMap() {
      const echartMapInstance = this.$echarts.getInstanceByDom(
        document.getElementById("declareMap")
      );
      const opt = {
        geo: {
          zoom: 1,
          map: "china",
          roam: "scale",
          center: [],
          top: 40,
          scaleLimit: {
            min: 1,
            max: 20,
          },
        },
      };
      echartMapInstance.dispatchAction({
        type: 'restore'
      })
      echartMapInstance.setOption(opt);
      this.$echarts.registerMap("china", ChinaJson);
      console.log(echartMapInstance.getOption(), 'init2');
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
.grid-box {
  display: grid;
  margin-top: 16px;
}
.grid-3-4-3 {
  gap: 16px;
  grid-template-columns: minmax(100px, 3fr) minmax(100px, 4fr) minmax(
      100px,
      3fr
    );
  grid-template-rows: 220px 200px 200px;
}
.g-item {
  // height: 100px;
  border: 1px solid orangered;
}
.map {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  .backBtn {
    width: 80px;
    height: 27px;
    line-height: 26px;
    color: #00d8ff;
    border: 1px solid #00a5ffcc;
    border-radius: 4px;
    font-size: 12px;
    background: rgba(0, 29, 77, 0.2);
    cursor: pointer;
    .leftArrow {
      float: left;
      margin-right: 2px;
    }
    .text {
      margin-left: -8px;
    }
    &:hover {
      background: rgba(0, 29, 77, 0.8);
    }
  }
}
.left-end {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 50%));
  gap: 16px;
}
</style>
